<template>
  <div class="ppt-box">
    <div class="__header">文件列表</div>
    <div class="__content">
      <div class="__row" v-for="item in files" :key="item">
        <div class="__name">文件名.ppt</div>
        <div class="__time">2024-05-30 12 : 30</div>
        <div class="__delete">删除</div>
      </div>
    </div>
    <div class="__footer">
      <div class="__btn __btn_add" @click="showAddModal">添加</div>
      <div class="__footer-right">
        <div class="__btn __btn_confirm">上一页</div>
        <div class="__btn __btn_confirm __btn_disabled">下一页</div>
      </div>
    </div>
    <a-modal width="230px" wrapClassName="board-modal-small" :getContainer="getPopupContainer" v-model:open="addShow"
      :footer="null">
      <div class="ppt-add">
        <div class="__header">添加文件</div>
        <div class="__content">
          <Select :allowClear="false" :getPopupContainer="getPopupContainer"
            style="width: 100%" v-model:value="addParam.role"  placeholder="选择适用角色" :options="roleList">
          </Select>
          <Upload/>
        </div>
        <div class="__footer __small-footer">
          <div class="__btn __btn_cancel" @click="cancelAdd">取消</div>
          <div class="__btn __btn_confirm">确定</div>
        </div>
      </div>
    </a-modal>
  </div>

</template>
<script lang="ts" setup>
import { defineProps, ref, reactive } from 'vue';
import { Select} from 'ant-design-vue';
import Upload from './upload.vue';

defineProps<{
  title: string,
}>();
const files = ref(10);
const addParam = reactive({
  role: null,
  file: []
});
const roleList = ref([])
const addShow = ref(false);
const getPopupContainer = () => {
  return document.querySelector('.board-container');
}
const showAddModal = () => {
  addShow.value = true;
}
const cancelAdd = () => {
  addShow.value = false;
}
</script>

<style lang="less" scoped>
.ppt-box {
  position: relative;
  width: 550px;
  height: 420px;
  overflow-y: auto;
  background: url("./images/pptbg.svg");
  background-color: #053E62;
  background-size: 100% 100%;
  color: #fff;

  .__header {
    margin: 20px 0 10px 20px;
    padding: 0 0 0 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 34px;
  }

  .__content {
    margin: 0 22px;

    .__row {
      display: flex;
      box-sizing: border-box;
      height: 28px;
      padding: 0 24px 0 16px;
      border: 1px solid rgb(5 62 98 / 100%);
      font-size: 13px;
      line-height: 26px;
      cursor: pointer;

      &:hover {
        background: rgb(0 0 0 / 15%) !important;
      }

      .__name {
        width: 200px;
        height: 26px;
        overflow: hidden;
        line-height: 26px;
      }

      .__time {
        flex: 1;
        margin-left: 30px;
      }

      .__delete {
        color: rgba(#00F1E3, .75);
        cursor: pointer;

        &:hover {
          color: #00F1E3;
        }
      }
    }

    .__row+.__row {
      border-top: none;
    }

    .__row:nth-child(odd) {
      background-color: #022E49;
    }
  }
}

.__footer {
  display: flex;
  position: absolute;
  right: 22px;
  bottom: 0;
  left: 22px;
  justify-content: space-between;
  height: 72px;
  padding: 20px 0;

  &.__small-footer{
    right: 10px;
    left: 10px;
  }
}

.__footer-right {
  display: flex;
  gap: 5px;
}

.__btn {
  width: 100px;
  height: 32px;
  transition: all 100ms linear;
  background-size: 100% 100%;
  font-size: 13px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;

  &:hover {
    font-size: 15px;
  }

  &.__btn_add {
    background-image: url("./images/addbg.svg");
  }

  &.__btn_confirm {
    background-image: url("./images/confirmbg.svg");
  }

  &.__btn_cancel {
    background-image: url("./images/cancelbg.svg");
  }

  &.__btn_disabled{
    color: #a8a6a6;
  }
}

.ppt-add {
  position: relative;
  width: 230px;
  min-height: 230px;
  overflow-y: auto;
  background: url("./images/addModalbg.svg");
  background-color: #053E62;
  background-size: 100% 100%;
  color: #fff;

  .__content{
    margin: 16px;
  }

  .__header {
    height: 50px;
    padding-left: 15px;
    font-size: 12px;
    font-weight: 600;
    line-height: 50px;
  }
}
</style>
